<script setup lang="ts">
import type { OrderDetail } from '@\types\order'
import { OrderType } from '@/enums';
import { getMedicalOrderPre } from '@/services/order';
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'


const order = ref<OrderDetail>()
const route = useRoute()
const onMounted = (async() = > {
  const res = await getMedicalOrderPre(route.query.orderId as string)
  order.value = res.data
})


</script>

<template>
  <div class="order-pay-result-page">
    <cp-nav-bar title="药品支付结果"></cp-nav-bar>
    <div class="result" v-if="order.value?.status === OrderType.medicinePay">
      <van-icon name="clear"></van-icon>
      <div class="price">￥{{ order.value.actualPayment }}</div>
      <div class="status">支付失败</div>
      <div class="tip">订单支付失败，可以点击查看订单继续支付，如有疑问联系客服~</div>
    </div>
    <div class="result" v-else>
      <van-icon name="checked"></van-icon>
      <div class="price">￥{{ order.value?.actualPayment }}</div>
      <div class="status">支付成功</div>
      <div class="tip">订单支付成功，已通知药房尽快发出，请耐心等待</div>
    </div>
    <div class="btn">
      <van-butotn type="primary" :to="`/order/${order.value?.id}`">查看订单</van-butotn>
      <van-butotn :to="`/room?orderId=${order.value?.roomId}`">返回诊室</van-butotn>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-pay-result-page {
  padding-top: 46px;

  .result {
    display: flex;
    flex-direction: column;
    align-items: center;

    .van-icon {
      font-size: 75px;
      margin-top: 60px;
    }

    .van-icon-clear {
      color: var(--cp-price)
    }

    .van-icon-checked {
      color: var(--cp-primary)
    }

    .price {
      font-size: 22px;
      margin-top: 10px;
    }

    .status {
      color: var(--cp-text3)
    }

    .tip {
      color: var(--cp--tip);
      width: 240px;
      text-align: center;
      margin-top: 20px;
    }
  }
}


.btn {
  margin-top: 60px;
  display: flex;
  justify-content: center;

  .van-button--primary {
    margin-right: 20px;
  }
}
</style>